<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.org/ui"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:gp="http://java.sun.com/jsf/composite/gpymes">


    <ui:include src="#{dirFiltros}dialogosFiltros.xhtml"/>
    <gp:columnas bean="#{bean}"/>
    <gp:dialogoConsulta bean="#{bean}"/>
    <h:form id="formConsulta">
        <style>
            #contenedor-menu  {

                background-size:cover;
                width:100%;
                border-radius:3px;
                margin:5px auto;
                box-shadow:0 5px 15px rgba(0,0,0,.2);
                height:50px;  /* Alto del contenedor */
                overflow:hidden;
            }
            #menuTrans {
                height:40px;  /* Alto del menú */
                float:right;
                padding:15px 10px 0 0;
                font-size:10px;
            }
            #menuTitulo {
                height:40px;  /* Alto del menú */
                float:left;
                padding:15px;
                font-size:25px;
                color: white;
                font-family: sans-serif;
                font-style: italic;
            }
            #menuTrans ul {
                float:right;
            }
            #menuTrans ul li {
                display:inline-block;
                margin:0 10px 0 0;
                padding:4px 6px;
                background:rgba(255,255,255,.2);  /* Fondo del enlace */
                cursor:pointer;
                border-radius:4px;
                -webkit-transition:.2s;
                -moz-transition:.2s;
                -o-transition:.2s;
                -ms-transition:.2s;
            }
            #menuTrans ul li:hover {
                background:rgba(90, 210,255, 0.8);  /* Fondo al pasar el cursor por encima */
                -webkit-transform:scale(1.5);
            }
            #menuTrans ul li a {
                display:inline-block;
                color:white;  /* Color del enlace */
            }
        </style>
        <gp:layout2>
            <f:facet name="operaciones">
                <ui:include src="#{dirFiltros}operaciones.xhtml"/>
            </f:facet>
            <f:facet name="filtros">
                <gp:filtrosDisponibles bean="#{bean}"/>
            </f:facet>

            <f:facet name="centro">
                <h:panelGroup>

                    <div id="contenedor-menu" class="bgvertgradientGris">
                        <div  id="menuTitulo">
                            <p:outputPanel styleClass="resultado">
                                #{bean.consultaActual.nombre}
                            </p:outputPanel>
                        </div>
                        <div id="menuTrans">
                            <ul>
                                <li><a href="#"> 
                                        <div>
                                            <h:commandButton image="#{resource['img/casa.png']}" action="/home.xhtml"/>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <div>
                                            <h:commandButton image="#{resource['img/nuevo.png']}" action="#{bean.nuevo}"/>
                                        </div>
                                    </a>
                                </li>
                                <li><a href="#"><img src="#{resource['img/abrir.png']}" id="toggleConsultas"></img></a></li>
                                <li><a href="#"><img src="#{resource['img/guardar.png']}" onclick="consulta.show()"></img></a></li>
                                <li><a href="#"><img src="#{resource['img/filtro.png']}" id="toggleFiltro"></img></a></li>
                                <li>
                                    <a href="#">
                                        <div>
                                            <h:commandButton image="#{resource['img/sum.png']}" action="#{bean.toogleTotaliza()}" >
                                                <p:ajax update="@(.resultado)" />
                                            </h:commandButton>
                                        </div>
                                    </a>
                                </li>
                                <li><a href="#"><img src="#{resource['img/columnas.png']}" onclick="columnas.show()"></img></a></li>
                                <li><a href="#">
                                        <h:commandLink>  
                                            <p:graphicImage value="#{resource['img/excel.png']}" />  
                                            <p:dataExporter type="xls" target=":#{components.tbl.clientId}" fileName="cars"/>  
                                        </h:commandLink>
                                    </a></li>
                                <li><a href="#">
                                        <h:commandButton image="#{resource['img/pdf.png']}" action="#{bean.createPDF}">
                                           
                                        </h:commandButton>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="row-fluid">
                        <div class="span12" id="areaFiltro">
                            <gp:dropArea bean="#{bean}"/>
                            <p:spacer height="10"/>
                        </div>
                        <div class="span12" style="overflow-x: auto; padding: 0px;margin: 0px;padding-bottom: 10px;padding-right: 2px;padding-left: 2px;">
                            <gp:listado bean="#{bean}"/>
                        </div>
                    </div>
                </h:panelGroup>
            </f:facet>
        </gp:layout2>
    </h:form>

</ui:composition>
